<template>
  <div class="home">
    <!-- <p>{{num}}</p>
    <p>{{number}}</p>
    <el-button @click="add" type="primary">Primary</el-button> -->
    <el-table :data="tableData" style="width: 100%" @selection-change="change">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <el-button @click="delect" type="primary">删除所选</el-button>
    <!-- <my-button></my-button> -->
  </div>
</template>

<script setup>
import { ref,reactive,toRefs } from 'vue';
// import myButton from '../components/myButton.vue';
// let num = ref(10)
// const data = reactive({
//   number: 200
// })
// const add = () => {
//   num.value++
//   data.number++
//   // console.log(num);
// }
// const { number } = toRefs(data)



const selection = ref([]); // 选中的数据
const tableData = ref([
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ]);

  const change = (val) => {
    selection.value = val;
  }
  
  const delect = () => { // 删除事件
    // tableData.value.forEach(item => {
    //   if (item.date)
    // })
    //  selection.value.forEach(item => {
    //    let index = tableData.value.findIndex(n => n.date == item.date)
    //    tableData.value.splice(index,1)
    //  })
   tableData.value = tableData.value.filter(item => !selection.value.some(n => n.date == item.date))
  }


// const arr = [1,2,3,4,5,6]
// const arr1 = [4,2,6]

// arr1.forEach(item => {
//   let index = arr.findIndex(n => n==item);
//   arr.splice(index,1)
// })
// console.log(arr);


// let arr2 = arr.filter(item => !arr1.some(n => n == item))
// console.log(arr2);


// @ is an alias to /src

// export default {
//   name: "Home",
//   components: {},
//   setup() {
//     const tableData = [
//       {
//         date: "2016-05-03",
//         name: "Tom",
//         address: "No. 189, Grove St, Los Angeles",
//       },
//       {
//         date: "2016-05-02",
//         name: "Tom",
//         address: "No. 189, Grove St, Los Angeles",
//       },
//       {
//         date: "2016-05-04",
//         name: "Tom",
//         address: "No. 189, Grove St, Los Angeles",
//       },
//       {
//         date: "2016-05-01",
//         name: "Tom",
//         address: "No. 189, Grove St, Los Angeles",
//       },
//     ];
//     // return{
//     //   tableData
//     // }
//   },
// };
</script>
